/*
* @author David Alexa <alexa.david@me.com>
*
* Copyright (C) 2012-2013 CESNET
*
* LICENSE TERMS
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
*    notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
*    notice, this list of conditions and the following disclaimer in
*    the documentation and/or other materials provided with the
*    distribution.
* 3. Neither the name of the Company nor the names of its contributors
*    may be used to endorse or promote products derived from this
*    software without specific prior written permission.
*
* ALTERNATIVELY, provided that this notice is retained in full, this
* product may be distributed under the terms of the GNU General Public
* License (GPL) version 2 or later, in which case the provisions
* of the GPL apply INSTEAD OF those given above.
*
* This software is provided ``as is'', and any express or implied
* warranties, including, but not limited to, the implied warranties of
* merchantability and fitness for a particular purpose are disclaimed.
* In no event shall the company or contributors be liable for any
* direct, indirect, incidental, special, exemplary, or consequential
* damages (including, but not limited to, procurement of substitute
* goods or services; loss of use, data, or profits; or business
* interruption) however caused and on any theory of liability, whether
* in contract, strict liability, or tort (including negligence or
* otherwise) arising in any way out of the use of this software, even
* if advised of the possibility of such damage.
*/

@import "compass/reset";
@import "compass/css3";
@import "compass/typography/links/link-colors";
@import "compass/typography/text/ellipsis";



// basic colors - http://kuler.adobe.com/#themeID/233350
$cBase:					#004F80;
$cComp1Light: 			#1486CD;
$cComp1Dark: 			#002034;
$cComp2Light: 			#804B00;
$cComp2Dark: 			#341E00;
$cAlert:				#820101;
$cGreen:				#007711;

$cFont: 				#333;

// basic sizes
$hNavTop:				40px;
$sContentPadding:		15px;

// fonts
$fBody: 		Arial, Trebuchet, Verdana, sans-serif;
$fHeadings:		Arial, Trebuchet, Verdana, sans-serif;
$fMonospace:	"Courier New", Courier, monospace;

$img:			'../images/';

html { min-height: 100%; height: 100%; width: 100%; min-width: 800px; }
body { background: #f0f0f0; font-family: $fBody; font-size: 0.625em; color: $cFont; position: relative; min-height: 100%; height: 100%; overflow: hidden;
	> * { @include box-sizing(border-box); }
}
a { @include link-colors($cBase, #000); 
	&:hover { text-decoration: none; }
}
strong, b { font-weight: bold; }
.left { float: left; }
.right { float: right; }
hr.cleaner { width: 100%; height: 0px; margin: 0px; border: 0px none; color: transparent; background: transparent; visibility: hidden; clear: both; }
.red { color: $cAlert; }
.green { color: $cGreen; }

.cover-wo-alerts { position: relative; height: 100%; min-height: 100%; width: 100%; }

.button { @include background( linear-gradient(lighten($cBase, 10%), darken($cBase, 4%)) ); @include border-radius(5px); padding: 8px 20px; color: #fff; @include text-shadow(1px, 1px, 2px, #333); font-size: 1em; font-weight: normal; border: 1px solid darken($cBase, 4%); cursor: pointer; @include single-box-shadow(#aaa, 0px, 0px, 8px); margin: 15px 0px; position: relative; z-index: 1; text-decoration: none;
	&:before { position: absolute; z-index: -1; content: ""; top: 1px; left: 0px; right: 0px; bottom: 0px; border-top: 1px solid rgba(255,255,255,0.2); }
	&:active { @include single-box-shadow(rgba(255,255,255,0.25), 0px, 2px, 5px, false, true);  }
	&:hover { @include background( linear-gradient($cBase, darken($cBase, 14%)) ); }
	&.red { @include background( linear-gradient($cAlert, darken($cAlert, 5%)) ); border: 1px solid darken($cAlert, 30%); color: #fff; 
		&:hover { @include background( linear-gradient($cAlert, darken($cAlert, 15%)) ); }
	}
	&.grey { @include background( linear-gradient(#666, darken(#666, 8%)) ); border: 1px solid darken(#555, 30%); color: #fff;
		&:hover { @include background( linear-gradient(#555, darken(#555, 15%)) ); }
	}
	&.small { padding: 4px 6px; font-size: 0.85em; }
}
.bubble { background: #ddd; @include inline-block; padding: 6px 10px; @include border-radius(5px); }

#ajax-spinner { position: absolute; width: 100%; height: 100%; @include background( url($img + 'ajax-loader.gif'), rgba(0,0,0,0.5) ); background-repeat: no-repeat; background-position: center center; top: 0; left: 0; z-index: 30; }

/* navigation */
nav#block--topMenu, div#block--topMenu { @include background( linear-gradient(darken($cBase, 5%), darken($cBase, 10%))); height: $hNavTop; line-height: $hNavTop; color: #fff; border-bottom: 1px solid #000; @include box-shadow( 0px 0px 7px rgba(0,0,0,0.9)); position: absolute; z-index: 100; top: 0px; width: 100%;
	> a { color: #fff; text-decoration: none; @include text-shadow(1px 1px 2px #000); padding: 0px 20px; border-left: 1px solid $cBase; float: left; font-size: 1.3em; position: relative;
		&:first-child + a { border-left: 1px solid #000; }
		&:hover, &.active { background: darken($cBase, 20%); }
		&.nth-0 { border-left: 1px solid desaturate($cComp1Light, 50%); }
		&.active {
			span.arrow { position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0px; height: 0px; display: block; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid darken($cBase, 20%); }
		}
	}

	//.ico-lock, .ico-unlock, .ico-session, .ico-refresh
	.header-icon { background: $cComp1Dark; padding: 0px 4px; border-left: 1px solid lighten($cComp1Dark, 10%);
		span { display: block; padding: 0px;  float: left; width: 40px; height: 39px; @include opacity(0.5); }
		&:hover, &.active {
			span { @include opacity(1); }
		}			
	}

	.ico-home { float: left; border-right: 1px solid desaturate($cComp1Light, 50%); border-left: 0px; padding: 0px 20px 0px 0px; background: $cBase; height: 39px;
		span { width: 50px; background: url($img + 'ico/16_home.png') center center no-repeat; }
		&:hover, &.active { background: darken($cBase, 5%); }
	}

	.ico-lock { 
		span { background: url($img + 'ico/16_lock.png') center center no-repeat; }
	}

	.ico-unlock { 
		span { background: url($img + 'ico/16_unlock.png') center center no-repeat; }
	}

	.ico-session { 
		span { background: url($img + 'ico/16_info.png') center center no-repeat; }
	}

	.ico-refresh { border-right: 1px solid #000;
		span { background: url($img + 'ico/16_refresh.png') center center no-repeat; }
	}

	.ico-alerts { width: 63px; height: 39px; display: block; padding: 0px; background: #000; border-left: 0px none;
		&.red { background: $cAlert;
			.count { background: darken($cAlert, 10%); }
		}
		&.green { background: $cGreen;
			.count { background: darken($cGreen, 10%); }
		}
		span { background: url($img + 'ico/16_alerts.png') center center no-repeat; }
		.count { @include border-radius(50%); background: #444; color: #fff; text-align: center; width: 22px; height: 22px; display: block; float: right; margin-top: 9px; line-height: 22px; margin-right: 5px; margin-left: -8px; }
	}

	.others-cover { float:right; position:relative;
		.show-link, .others { display:none; }
		.show-link { background: $cComp1Dark; border-left: 1px solid lighten($cComp1Dark, 10%); width: 30px; height: $hNavTop; border-right: 1px solid desaturate($cComp1Light, 50%);
			span { text-align:center; background: url($img + 'ico/16_arrow_down.png') center center no-repeat; display:block; width: 30px; }
		}
		&.visible {
			.show-link { display:block; }
		}
		.others { position:absolute; right: 0px; top: $hNavTop; min-width: 150px; @include background(rgba(darken($cBase, 5%), 0.9)); @include single-box-shadow(rgba(0,0,0,0.4), 0px, 0px, 8px);
			a { border-bottom: 1px solid #000; display:block; padding: 10px 20px; color: #fff; font-size: 1.25em; text-decoration:none; text-align:right; line-height: 1em;
				&:hover { background: $cComp1Dark; }
				span.arrow { display: none; }
			}
		}
	}


	#userpane { float: right; height: $hNavTop; padding: 0px $sContentPadding 0px $sContentPadding + 16px + 10px; color: #ccc; background: url($img + 'ico/16_users-o50.png') 50% 5px no-repeat $cComp1Dark; background: url($img + 'ico/16_users-o50.png') 10px (40px - 16px)/2 - 1px no-repeat rgba($cComp1Dark, 0.8); border-left: 1px solid #000; font-size: 1.2em;
		.log-out { border-left: 1px solid lighten($cFont, 10%); padding-left: 7px; @include link-colors(#ccc, $cComp1Light); margin-left: 5px;
			&:hover { text-decoration: none; }
		}
	}

	#alerts-icon { background: #000; float: right; color: #fff; height: 39px; border-left: 1px solid #777; }
}

nav#block--leftColumn { float: left; width: 10%; border-right: 1px solid #bababa; background: #dadada; @include single-box-shadow(darken(#dadada, 10%), 0px, 0px, 10px, false, true); min-height: 100%; padding: $hNavTop 0px 0px 0px; font-size: 1.3em; position: relative; margin-left: -1px; //overflow-y: scroll;
	> *:first-child { margin-top: $sContentPadding; }
	h3 { padding: 0px $sContentPadding 10px $sContentPadding; font-weight:bold; font-size: 1.1em; border-bottom: 1px solid #888; margin-bottom: 5px; }
	h4 { margin-top: 25px; padding: 0px $sContentPadding 10px $sContentPadding; font-weight:bold; font-size: 1em; border-bottom: 1px solid #bbb; margin-bottom: 5px; }
	a { display: block; padding: 9px $sContentPadding; @include link-colors($cFont, #000); text-decoration: none;
		&:hover, &.active { padding-left: $sContentPadding - 5px; margin-left: 5px; }
		&:hover { background: #bbb;  }
		&.active { background: #f5f5f5; color: $cComp2Dark; margin-right: -1px; padding: 9px $sContentPadding + 1px 8px $sContentPadding - 6px; border: 1px solid #bababa; border-right: 0px none; }
	}
	.item { display: block; padding: 6px $sContentPadding; color: #555;
		.bullet { @include inline-block; width: 7px; height: 7px; margin-right: 8px; background: #777; margin-top: -1px; }
	}

	#history-and-profiles { height: 100%; min-height: 100%; max-width: 100%; position: relative; margin-top: 0px;
		#block--historyOfConnectedDevices, #block--profilesOfConnectedDevices { position: relative; height: 50%; width: 100%; min-height: 50%; margint-top: 0px; overflow-y: scroll; @include box-sizing(border-box); }
		#block--historyOfConnectedDevices { height: 50%; padding-top: $sContentPadding; }
		#block--profilesOfConnectedDevices { border-top: 1px solid #333; padding-top: 5%; height: 50%; }
		a { position: relative; @include ellipsis(); padding-top: 7px; padding-bottom: 7px;
			&.active { margin-right:  0px; }
			.icon { width: 18px; height: 18px; padding: 0px; @include border-radius(3px); background: #fff; line-height: 18px; text-align: center; border: 1px solid #aaa; display: none; margin-top: -7px; margin-bottom: -4px; margin-right: -3px;
				&:hover { background-color: #bbb; border-color: #888; }
			}
			&:hover { padding-left: 3px;
				.icon { @include inline-block; }
			}
		}
	}
}

body section { float: left; width: 50%; min-height: 100%; padding: $sContentPadding; font-size: 1.4em; overflow-y: scroll; background: #f5f5f5; @include box-sizing(border-box); border-top: $hNavTop solid transparent;
	&.left-nav-defined { width: 45%; }


	&#block--state { border-right: 1px solid #bababa; @include single-box-shadow(darken(#f5f5f5, 5%), -5px, 0px, 5px, false, true); padding-right: 2 * $sContentPadding; }
	&#block--config { padding-left: 2 * $sContentPadding; }
	&#block--alerts { width: 20%; position: absolute; top: 0px; right: 0px; background: #333; border-left: 1px solid #000; @include box-shadow( 0px -7px 7px rgba(0,0,0,0.9)); padding-left: 0px; padding-right: 0px; margin-right: -20%;
		.message { border-bottom: 1px solid #000; padding: 10px 5%; color: #aaa; font-size: 0.9em; border-top: 1px solid #666; line-height: 1.4em;
			&:first-child { border-top: 0px none; }
			&:last-child { border-bottom: 0px none; }

			&.error {
				.circle { background: #b90505; }
			}
			&.success {
				.circle { background: $cGreen; }
			}
			&:hover { color: #fff;
				.close { display: block; }
				.circle { display: none; }
			}

			span { float: right; margin-left: 5px; }
			.close { display: none; cursor: pointer; }
			.circle { @include border-radius(50%); width: 10px; height: 10px; display: block; @include box-shadow(rgba(0,0,0,0.2) 0px 2px 4px); margin: 2px 0px 5px 0px; }
		}
	}


	*[class*='level'] { position: relative; float: left; width: 100%;
		.dots { background: url($img + 'dot.png') left top repeat transparent; @include inline-block; position: absolute; left: 0px; top: 0px; min-height: 28px; height: 100%; }
	}
	@for $i from 0 through 15 {
	  .level-#{$i} { 
	  	.dots { width: 8px * $i; }
	  	.label { padding-left: 6px + (8px * $i); }
	  	input.label { margin-left: 6px + (8px * $i); padding-left: 0px; }
	  }
	}
	.level-0:not(.container):not(.list) { margin: 0px; border-left: 2px solid #aaa; border-right: 2px solid #aaa; background: #f4f4f4;
		&:nth-child(even) { background: #fff; border-left: 2px solid #333; border-right: 2px solid #333;
			//.even { background: #f8f8f8; }
			> .leaf-line:first-child { border-top: 1px solid #666; }
		}
		&:nth-child(odd) {
			//.even { background: #f8f8f8; }
			> .leaf-line:first-child { border-top: 1px solid #aaa; }
		}
	}
	.level-0> .leaf-line > .label > .label-cover {
		> span.dash { display: none; }
	}
	.leaf-line { padding: 7px 1.5% 7px 0px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: -1px; @include box-sizing(border-box); float: left; width: 100%; position: relative;
		&.hover { background-color: #dadada; border-color: #aaa; }
		.label { width: 35%; float: left; @include box-sizing(border-box); color: #333; }
		.value { width: 59%; float: left; color: #000; margin-left: 2%; }
		.range { width: 42%; float: left; }
		.range-cover-number { width: 6%; float: left; margin-right: 1.8%; text-align: right; padding: 3px 5px; margin-top: -2px; margin-bottom: -2px; @include box-sizing(border-box); border: 1px solid #ccc; @include background( linear-gradient(#fff, #f4f4f4) ); @include inline-block; @include border-radius(3px); }
		.config-value-cover, .value-cover { width: 50%; float: left; margin-top: -3px; margin-left: 2%;
			label { margin: 0px; padding: 0px; width: auto; padding-right: 10px; line-height: 18px; height: 18px; }
		}
		input.value.text { width: 50%; margin: -4px 0px; border: 1px solid #ccc; height: 22px; line-height: 22px; padding: 0px 3px; font-size: 0.9em; margin-left: 2%; }
		textarea.value { width: 50%; margin: -4px 0px; border: 1px solid #ccc; padding: 0px 3px; font-size: 0.9em; margin-left: 2%; }

		&.generated {
			input.value.text, textarea.value { margin-top: 0px; margin-bottom: 0px; }
			.tooltip { margin-top: 3px; }
		}

		.edit-bar { width: 80px; min-height: 22px; margin: -3px 0px -5px 2%; float: right; text-align: right;
			.child { display: none; }
			img { @include opacity(0.4); cursor: pointer;
				&:hover { @include opacity(1); }
			}
			&.generated { margin-top: 0px; }
		}
		+ .leaf { }
		&.state .edit-bar {	width: auto; }

		&.active { position: relative; z-index: 25; background: #fff; }
		&.has-children {
			span.bull { width: 5px; height: 5px; position: absolute; left: -9px; top: 6px; background-color: #666; }
		}
		.label-cover { position: relative;
			span.dash { width: 5px; height: 1px; position: absolute; left: -9px; top: 8px; background-color: #666; }
		}
//		&.config { background: #ccc; }
	}	
	.container, .list { margin: 25px 0px; 
		> *:not(.container):not(.list) { border-left: 2px solid #aaa; border-right: 2px solid #aaa; background: #f0f0f0;
			&:nth-child(even) { background: #fff; border-left: 2px solid #333; border-right: 2px solid #333;
				.dots { background-color: #fff; }
			}
		}
		.container, .list { border-top: 1px solid #ddd; }

		+ * > .leaf-line:first-child { margin-top: 0px; }
	}
	.mandatory { color: #888; }
	.tooltip { float: right; margin: 0px 0px 0px 4px; }
	.label-cover {
		&.has-tooltip {  }
	}

	&#block--singleContent { width: 100%; min-height: 100%; font-size: 1.4em; padding: $sContentPadding 2 * $sContentPadding $sContentPadding / 2 2 * $sContentPadding;
		&.left-nav-defined { width: 90%; }
		&.max-width-column { max-width: 800px; width: 100%; float: none; }
	}

	.filter { margin-top: 20px;
		> div { float: left; margin-left: 30px; }
		label { @include inline-block; margin: 0px 10px 0px 0px; width: auto; height: auto; line-height: 1em;
			&.required:after { content: " "; }
		}
		select { margin-top: 5px; width: 100px; }
		.button { margin: 1px 10px; }
		.note { font-size: 0.8em; font-style: italic; margin-top: 7px; }
	}

	#block--sourceValidation { float: left; margin: 29px 0px 0px 7px; font-size: 0.9em;
		.source-validation { margin-top: -6px; }
	}
}
.top-part { position: absolute; right: 2 * $sContentPadding; top: $hNavTop + $sContentPadding; font-size: 1.2em; @include opacity(0.7); z-index: 10;
	&:hover { @include opacity(1); }
}
.configure .loading { background: url($img + "loading-bar.gif") repeat-x; display:block; height: 20px; line-height: 20px; color: #fff; padding: 0px 3%; width: 94%; border: 1px solid darken($cBase, 10%); @include border-radius(5px); }

body section, #block--singleContent { position: relative; @include box-sizing(border-box);
	h1, h2, h3, h4, legend { font-family: $fHeadings; color: $cBase; }
	h1 { font-size: 1.9em; margin: 20px 0px 15px 0px; }
	h2 { font-size: 1.7em; margin: 15px 0px 10px 0px; }
	h3 { font-size: 1.5em; margin: 10px 0px 5px 0px; }
	h4 { font-size: 1.3em; margin: 5px 0px 5px 0px; }

	legend { font-size: 1.9em; margin-bottom: 15px; }
}
.alert { padding: 15px 20px; border: 1px solid #ccc; background: #fff; @include border-radius(5px); @include single-box-shadow(#d5d5d5, 0px, 0px, 8px); clear: both; margin: 0px 0px 15px 0px;
	&.info { background: url($img + 'ico/info.png'); background-color: #fff; }
	&.success { background: url($img + 'ico/ok.png'); color: $cGreen; }
	&.error { background: url($img + 'ico/error.png'); color: #820101; }
	
	&.info, &.success, &.error { padding-left: 40px; background-position: 10px 12px; background-repeat: no-repeat; }
}
.alert-cover { position: fixed; right: $sContentPadding; top: $hNavTop + 10px; z-index: 120; font-size: 1.4em; max-width: 25%;
	.alert { background-color: #fff; background-color: rgba(255,255,255,0.8); border: 10px solid rgba(0,0,0,0.8); position: relative; padding-right: 40px;
		.close { width: 16px; height: 16px; line-height: 16px; position: absolute; right: 5px; top: 5px; @include border-radius(3px); background: #fff; border: 1px solid #ccc; text-align: center;
			&:hover { cursor: pointer; background-color: #ccc; border-color: #999; }
		}
	}
}

article#block--singleContent { font-size: 1.4em; padding: $hNavTop $sContentPadding; 
	.alert { clear: both; margin-bottom: -30px; }
}

#block--notifications { width: 90%; background-color: #333; height: 10%; @include box-sizing(border-box); position: absolute; right: 0px; top: 100%; border-top: 1px solid #000; color: #ccc; font-size: 1.25em; font-family: $fMonospace;
	.notif-cover { padding: 8px $sContentPadding; overflow-y: scroll; height: 100%; position: relative; @include box-sizing(border-box); }
	.notif-history-cover { @include box-sizing(border-box); margin: -8px 0px - $sContentPadding 8px 0px - $sContentPadding; background-color: #444; border-bottom: 1px solid #000; padding: 0px $sContentPadding;
		> .notif {
			&:first-child { margin-top: 8px; }
			&:last-child { margin-bottom: 8px; }
			.green, .red { color: #fff; }
		}
	}
	.notif { margin-bottom: 2px; overflow: hidden; }
	.time { margin-top: 6px; color: #999; }
	strong { margin-right: 10px; width: 70px; float: left; }
	&.hidden { border: 0px none; height: 0px; padding: 0px; top: 100% !important; visibility: hidden; }

	.root-tag, .tagValue { margin-right: 10px; }
	.tagName { border-left: 1px solid #999; padding-left: 10px; color: #999; }
	a { color: #fff; }
}

/* formulare */
$hInput: 			30px;
form { margin: 15px 0px;
	&.login, &#login-form { border: 1px solid #ccc; @include background( linear-gradient(#fafafa, #eaeaea) ); @include border-radius(5px); padding: 20px; @include single-box-shadow(#ccc, 0px, 0px, 8px); }
	&.login { 
		label { width: 25%; padding-right: 2%; float: left; @include box-sizing(border-box); text-align: right; }
		input { 
			&[type="text"], &[type="password"] { width: 60%; float: left; }	
			&[type="submit"] { margin-left: 25%; }
		}
	}
	&#login-form { width: 400px; margin: 0px auto;
		.desc { font-size: 0.95em; margin-bottom: 25px; }

		label { width: 20%; margin-right: 5%; float: left; }
		input { 
			&[type="text"], &[type="password"] { width: 70%; float: left; }	
			&[type="submit"] { margin-left: 25%; }
		}		
	}

	label { @include inline-block; width: 90px; height: $hInput; line-height: $hInput; margin-top: 10px;
		&.required {
			&:after { content: " *"; }
		}
	}
	input { @include box-sizing(border-box);
		&[type="text"], &[type="password"], &.text { width: 200px; height: $hInput; line-height: $hInput; padding: 0px 5px; border: 1px solid #ccc; @include background( linear-gradient(#fff, #f4f4f4) ); margin-top: 10px; @include inline-block; @include border-radius(3px); font-size: 1em; }
		&[type="submit"] { @extend .button; }
	} 
	textarea { @include box-sizing(border-box); @extend input[type="text"]; @include background( linear-gradient(#fff, #fafafa) ); height: 80px; line-height: 1.2em; }
	select { @include box-sizing(border-box); width: 200px; height: $hInput; }
		
}

.form-underlay { width: 100%; height: 100%; @include background(rgba(0,0,0,0.4)); position: absolute; top: 0px; right: 0px; z-index: 20; }
.form-cover { width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; z-index: 21; display: none; }
form.generatedForm { position: relative; z-index: 25; background: #fff; margin: 0px 0px 15px 0px; float: left; width: 100%; @include single-box-shadow(rgba(0,0,0,0.7), 0px, 0px, 10px);

	.leaf-line {
		input {
			&.label, &.value { margin-top: 0px; height: 22px; line-height: 22px; }
		}
	}	
	input[type="submit"] { float: right; margin-right: 15px; }
	.close { float: left; margin-left: 15px; }
}

article#block--singleContent #login-hp { padding: 100px 0px 0px 0px;
	.alert { margin-bottom: 0px; }
}

table { width: 100%; margin: 15px 0px; 
	th, td { border: 1px solid #ccc; padding: 8px 15px; }
	tr:nth-child(even) {
		th, td { background: #eaeaea; }
	}
}

/** ip lookup **/
#ip-info-cover { width: 100%;
	> div { width: 47%; }
	#map-canvas { height: 250px; }
	p { padding: 5px 0px; }
}
.modal-body { font-family: $fBody; color: #333; }
.modal-header { overflow: hidden;
	h3 { margin: 0px; padding: 0px; font-family: $fHeadings; color: $cBase; font-size: 1.5em; }
	.button { margin-top: 0px; margin-bottom: 0px; }
}

/* tooltip */
.tooltip { cursor: help;
	.icon-help { @include background(rgba(255,255,255,0.3)); border: 1px solid #ddd; color: #888; text-shadow: 1px 1px 2px #ccc; width: 16px; height: 16px; line-height: 16px; text-align: center; @include inline-block; @include border-radius(3px); font-size: 13px; margin: -4px 0px -2px 0px; 
		&:hover { @include background(rgba(255,255,255,0.7)); border: 1px solid #bbb; }
	}
	.tooltip-description { display: none; }
}
.gips-container { max-width: 252px; position: absolute; z-index: 10; margin-left: 2px; @include single-box-shadow(rgba(0,0,0,0.4), 0px, 0px, 7px); @include border-radius(4px); }
.gips-body { color: #fff; font-size: 13px; line-height: 1.55em; padding: 10px; padding-right: 20px; position: relative; float: left; @include border-radius(4px);
	&.blue { background-color: $cBase; }
}
.gips-icon { width: 0; height: 0; border-style: solid; border-width: 6px; position: absolute; bottom: -6px; border-color: $cBase transparent transparent transparent; margin-left: 20px; }

/* media queries */
@media screen and (max-width: 1280px) {
	nav#block--leftColumn { width: 14%; }
	body section {
		&.left-nav-defined { width: (100% - 14%)/2; }
		form[name=formCopyConfig] { margin-top: 0px; margin-bottom: 0px; }
		&#block--singleContent { 
			&.left-nav-defined { width: 86%; }
			form[name=formCopyConfig] { margin-top: 20px; }
		}
	}
	#block--notifications { width: 86%; }
}

@media screen and (max-width: 1550px) {
	body section {
		&.column {
			.leaf-line { 
				//.edit-bar { width: 16%; display: none; position: absolute; }
			}
		}
	}
}
